<template>
	<view class="container">
		<view class="nav-box" :style="'padding-top:' + statusBarHeight + 'px;opacity:' + (scrollTop > statusBarHeight + titleBarHeight + 80 ? 1 : 0)">
			<view class="nav-item df" :style="'height:' + titleBarHeight + 'px'">
				<image :src="user_info.avatar" mode="aspectFill"></image>
				<view class="ohto">{{user_info.name}}</view>
			</view>
		</view>
		<view class="user-box" :style="'padding-top:' + (statusBarHeight + titleBarHeight) + 'px'">
			<view class="user-bg"></view>
			<view class="user-img" style="z-index:-2">
				<lazy-load :src="user_info.avatar"></lazy-load>
			</view>
			<view class="user-top df">
				<view class="avatar" data-url="center/means" @click="navigateToFun">
					<lazy-load :src="user_info.avatar"></lazy-load>
				</view>
				<view class="user-btn df">
					<view class="btn-item bg1" data-url="center/means" @click="navigateToFun">编辑资料</view>
					<view class="btn-item bg2" data-url="setting/index" @click="navigateToFun">设置</view>
				</view>
			</view>
			<view class="user-name" data-url="center/means" @click="navigateToFun">{{user_info.name}}</view>
			<view class="user-intro" data-url="center/means" @click="navigateToFun">
				<text user-select="true">{{user_info.intro ? user_info.intro : "添加个人简介，让大家认识你..."}}</text>
			</view>
			<view class="user-tag df" data-url="center/means" @click="navigateToFun">
				<view v-if="2 != user_info.gender" class="tag-item df">
					<image :src="1 == user_info.gender ? '/static/img/nan.png' : '/static/img/nv.png'"></image>
				</view>
				<view v-if="user_info.age && '暂不展示' != user_info.age" class="tag-item df">{{user_info.age}}</view>
				<view class="tag-item df">IP属地：{{user_info.province}}</view>
			</view>
			<view class="user-num df">
				<view class="num-item df" data-url="center/follow?type=0" @click="navigateToFun">
					<text class="t1">{{user_info.follow}}</text>
					<text>关注</text>
				</view>
				<view class="num-item df" data-url="center/follow?type=1" @click="navigateToFun">
					<text class="t1">{{user_info.fans}}</text>
					<text>粉丝</text>
				</view>
				<!-- <view class="num-item df" @click="likePopupClick(!0)">
					<text class="t1">{{user_info.like_dynamic_count}}</text>
					<text>获赞</text>
				</view> -->
			</view>
		</view>
		<scroll-view scroll-x="true" class="user-block">
			<view class="block-box">
				<!-- <view v-if="user_info.activity_count" class="block-item df" data-url="activity/index?type=1" @click="navigateToFun">
					<view class="block-title" style="margin-right:68rpx">
						<view class="t1">活动</view>
						<view class="t2">{{user_info.activity_count ? "共" + user_info.activity_count + "个活动" : "没有参加活动"}}</view>
					</view>
					<view class="cu-group df">
						<view class="cu-item" :style="'background:' + (user_info.activity_img ? '#CECECE' : '#000')">
							<image v-if="user_info.activity_img" class="icon" src="/static/img/hd.png"></image>
							<image v-else class="img" :src="user_info.activity_img" mode="aspectFill"></image>
						</view>
						<view class="cu-lump1"></view>
						<view class="cu-lump2"></view>
					</view>
					<image class="block-icon" src="/static/img/x.png"></image>
				</view>
				<view v-for="(item,i) in blockList" :key="i" class="block-item df" :data-url="item.url" @click="navigateToFun">
					<view class="block-title" style="margin-right:68rpx">
						<view class="t1">{{item.name}}</view>
						<view v-if="item.count " class="t2">共{{item.count}}{{0 == i ? "个圈子" : 1 == i ? "件商品" : "笔订单"}}</view>
						<view v-else class="t2">{{0 == i ? "没有加入圈子" : 1 == i ? "购物车空空的" : "订单空空的"}}</view>
					</view>
					<view class="cu-group df">
						<view class="cu-item" :style="'background:' + (item.img ? '#CECECE' : '#000')">
							<image v-if="!item.img" class="icon" :src="item.icon"></image>
							<image v-else class="img" :src="item.img" mode="aspectFill"></image>
						</view>
						<view class="cu-lump1"></view>
						<view class="cu-lump2"></view>
					</view>
					<image class="block-icon" src="/static/img/x.png"></image>
				</view>
				<view style="flex-shrink:0;width:15rpx;height:15rpx"></view> -->
			</view>
		</scroll-view>
		<view class="bar-box df" :style="'top:' + (statusBarHeight + titleBarHeight - 1) + 'px'">
			<view v-for="(item,i) in barList" :key="i" class="bar-item df" @click="barClick" :data-i="i">
				<text :style="'color:' + (i == baridx ? '#000' : '#999') + ';font-size:' + (i == baridx ? '28rpx' : '26rpx')">{{item}}</text>
				<view :style="'opacity:' + (i == baridx ? 1 : 0)" class="bar-line"></view>
			</view>
		</view>
		<view class="heio df" :style="'height:' + (isFun || 'loading' == loadStatus ? '0px' : '60px')">
			<uni-load-more :showText="false" status="loading"></uni-load-more>
		</view>
		<view class="content-box">
			<view v-if="isEmpty" class="empty-box df">
				<image src="/static/img/inset/null.png" />
				<view class="e1">{{0 == baridx ? "暂无笔记内容" : 1 == baridx ? "暂无喜欢的内容" : "草稿箱空空的"}}</view>
				<view class="e2">{{1 == baridx ? "快在推荐中寻找更多笔记吧" : "发笔记，记录灵感日常"}}</view>
			</view>
			<block v-else>
				<multigraph :list="list" :page="page" ></multigraph>
				<!-- <block v-for="(item,i) in list" :key="i">
					<card-wd item="item" idx="i" bar="baridx"></card-wd>
				</block> -->
			</block>
			<uni-load-more :showText="false" :status="loadStatus"></uni-load-more>
		</view>
		<uni-popup ref="likePopup" type="top" >
			<view class="like-popup">
				<image class="like-img" src="/static/img/inset/like.png" mode="aspectFill"></image>
				<view class="like-content">
					<text>"</text>
					{{user_info.name}}
					<text>"</text>
					共获得 {{user_info.like_count}} 个赞
				</view>
				<view class="like-btn" @click="likePopupClick(!1)">确认</view>
			</view>
		</uni-popup>
		<tabbar currentPage="4" :currentMsg="currentMsg" :userAvatar="userAvatar"></tabbar>
	</view>
</template>

<script>
	const app = getApp();
	const api = require('@/config/api');
	const util = require('@/utils/util');
	import dynamicMy from '@/components/dynamic/my.vue';
	export default {
		components: {
			dynamicMy
		},
		data() {
			return {
				blockList: [
					// {
					//   name: "圈子",
					//   img: "",
					//   icon: "/static/img/qz.png",
					//   url: "center/circle?type=1",
					//   count: 0,
					// },
					// {
					//   name: "购物车",
					//   img: "",
					//   icon: "/static/img/gwc.png",
					//   url: "goods/cart",
					//   count: 0,
					// },
					// {
					//   name: "订单",
					//   img: "",
					//   icon: "/static/img/dd.png",
					//   url: "order/index",
					//   count: 0,
					// },
				],
				barList: ["笔记", "赞过", "草稿箱"],
				titleBarHeight: app.globalData.titleBarHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				insetUrl: api.insetUrl,
				scrollTop: 0,
				barIdx: 0,
				navbarTrans: 0,
				notice: 0,
				config: {},
				user_info: {
					name: '...',
					fans: 0,
					follow: 0,
					gender: 0,
					integral_usable: 0,
					province: '...',
					is_clockin: true,
				},
				circle_list: [],
				bararr: ['动态', '赞'],
				baridx: 0,
				list: [],
				page: 1,
				isEmpty: false,
				isFun: true,
				loadStatus: 'more',
				isdt: true,
				isUser:true,
			}
		},
		async onLoad() {
			util.showShareMenu();
			this.config = uni.getStorageSync('config');
			await this.$onLaunched;
			this.userRefreshInfo();
			if (!this.isUser) return;
			if (this.isuser_info) this.user_info = uni.getStorageSync('user_info');
			if (!this.isuser_info && this.isdt) {
				this.userCircle();
				this.userPublishContent();
			}
		},
		onShow() {
			let user_info = uni.getStorageSync('user_info');
			if (user_info == '' || user_info == null || typeof(user_info) == "undefined") {
				this.isUser = false;
			}else{
				this.isUser = true;
			}
			if (!this.isUser) return;
			let that = this;
			if (uni.getStorageSync('user_info')) {
				this.isuser_info = false;
				this.user_info = uni.getStorageSync('user_info');
				util.request(api.configUrl).then(function(res) {
					uni.setStorageSync('config', res.data);
					//console.log(res.data);
					that.config = uni.getStorageSync('config');
				})
				util.getMessageCount();
				if (app.globalData.dw == 1) {
					app.globalData.dw = 0;
					this.isdt = false;
					this.baridx = 0;
					this.list = [];
					this.page = 1;
					this.userPublishContent();
				}
			}
			let d = new Date();
			let dd = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getHours()
			if (uni.getStorageSync('dd') != dd) {
				uni.setStorageSync('dd', dd);
				this.userCircle();
				this.userRefreshInfo();
			}
		},
		onPullDownRefresh() {
			if (!this.isUser) return;
			this.userRefreshInfo();
			this.userCircle();
			this.list = [];
			this.page = 1;
			this.userPublishContent();
			uni.stopPullDownRefresh();
		},
		methods: {
			userRefreshInfo() {
				let that = this;
				util.request(api.userRefreshInfoUrl).then(function(res) {
					that.user_info = res.data.info;
					uni.setStorageSync('user_info', res.data.info);
					uni.setStorageSync('user_token', res.data.token);
					if (res.data.info.status == 0) {
						uni.reLaunch({
							url: '/pages/setting/err'
						});
					}
				});
			},
			userCircle() {
				let that = this;
				util.request(api.userCircleUrl).then(function(res) {
					that.circle_list = res.data;
				});
			},
			userPublishContent() {
				let that = this;
				that.loadStatus = 'loading';
				that.isEmpty = false;
				util.request(api.userPublishContentUrl, {
					type: that.baridx,
					page: that.page
				}).then(function(res) {
					that.isFun = true;
					if (res.data && res.data.data.length) {
						that.list = that.list.concat(res.data.data);
						that.page = res.data.current_page;
						that.loadStatus = 'more';
					} else if (that.page == 1) {
						that.isEmpty = true;
						that.loadStatus = 'more';
					} else {
						that.loadStatus = 'no-more';
					}
				});
			},
			barClick(e) {
				if (this.isFun) {
					this.baridx = e.currentTarget.dataset.i;
					this.isFun = false;
					this.list = [];
					this.page = 1;
					this.userPublishContent();
				}
			},
			toCircle(e) {
				uni.switchTab({
					url: '/pages/tabbar/circle'
				})
			},
			navigateToFun(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: '/pages/' + url
				})
			},
			likePopupClick(e) {
				e || this.$refs.likePopup.close();
				e && this.$refs.likePopup.open();
			},

		},
		onReachBottom() {
			if (!this.isUser) return;
			if (this.list.length) {
				this.page = this.page + 1;
				this.userPublishContent();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			let frontColor = "#ffffff";
			var trans = (e.scrollTop > 200 ? 200 : e.scrollTop) / 200;
			if (trans >= 1) {
				frontColor = "#000000";
			}
			this.navbarTrans = trans;
			uni.setNavigationBarColor({
				frontColor: frontColor,
				backgroundColor: "#ffffff",
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		onShareAppMessage: function() {},
		onShareTimeline(res) {
			return {
				title: app.globalData.shareTitle
			}
		},
	}
</script>

<style lang="scss">
	@import url("/static/css/tabbar/center.css");
</style>